<template>
	<view class="body pt80" style="background-image: url(https://feiya.qfxwl.com/assets/img/banner1.png);">
		<public-module></public-module>
		<wlk-navbar isFillHeight title="定制游" :navbarType='3'></wlk-navbar>
		<view class="card p20 mt80">
			<view class="top">
				<view class="left" :class="active==0?'active':''" @click="setAct(0)">
					<view class="content d-c-c d-c">
						<view class="f28 fb">个人定制</view>
						<view class="f22 mt5">亲子、蜜月、同龄结伴、长辈</view>
					</view>
				</view>
				<view class="right" :class="active==1?'active':''" @click="setAct(1)">
					<view class="content d-c-c d-c">
						<view class="f28 fb">团建/公司定制</view>
						<view class="f22 mt5">游学、研学、会务、素拓</view>
					</view>
				</view>
			</view>
			<view class="contents bg-white p20">
				<view class="d-s-c f40 mb20">
					<view class="fb mr20">目的地</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" mode="selector" :value="Iindex" :range="menu" range-key="name">
									<view class="name d-b-c">
										<view class="sub" v-if="Iindex==-1">我想去...</view>
										<view class="uni-input" v-else>{{menu[Iindex].name}}</view>
										<u-icon name="arrow-down"></u-icon>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-x class="icons mb20 d-s-c f-w">
					<view class="icon f24 pl20 mr10 mb10 pr20 pt5 pb5" :class="index==Iindex?'active':''"
						@click="setName(index)" v-for="(item,index) in menu" :key="index">{{item.name}}</view>
				</scroll-view>
				<u-button text='马上为我定制' v-if="active==0" color='#006ff5' @click="jump(`/pages/customized/from?name=${menu[Iindex].name||''}&id=12`)"></u-button>
				<u-button text='马上为我定制' v-if="active==1" color='#006ff5' @click="jump(`/pages/customized/from?name=${menu[Iindex].name||''}&id=16`)"></u-button>
			</view>
			<view class="tc tip p20 f26">飞吖定制游！专属行程·管家式服务-省心省钱 ></view>
		</view>
		<view class="p20">
			<!-- <image src="https://feiya.qfxwl.com/assets/img/ad.png" class="ww100" mode='widthFix'></image> -->
			<image src="https://feiyaoss.oss-cn-shenzhen.aliyuncs.com/uploads/20241015/55fd67a9dac26dc40daa6696fa421ddd.png" class="ww100" mode='widthFix'></image>
		</view>
		<view class="title fb f36 p20">行程案例</view>
		<!-- <scroll-view scroll-x class="scroll d-s-c">
			<view class="d-c-c f26 item bg-white ml20 pl20 pr20 pt5 pb5" @click="jump('/pages/index/category')">
				<u-icon name="map-fill" color="#2979ff" size="15"></u-icon>
				<text class="ml5 mr5">目的地</text>
				<u-icon name="arrow-down-fill" color="#2979ff" size="10"></u-icon>
			</view>
			<view class="item f26 bg-white ml10 pl20 pr20 pt5 pb5" @click="jump('/pages/index/category?c_id='+item.id)"
				v-for="(item,index) in menu" :key="index">{{item.name}}
			</view>
		</scroll-view> -->
		<view class="list p20" v-if="list.length>0">
			<view class="relative wlkflex justify-between bgw br04 mb20 overHidden pt20 pl20 pr20 pb20"
				@click="jump('/pages/note/detail?id='+note.id)" v-for="(note,index) in list" :key="index">
				<view class="detail-info wlkflex align-content-between wrap">
					<view class="wd100">
						<view class="info-name u-line-2 bold">{{note.name}}</view>
						<view class="info-desc u-line-2">{{note.desc}}</view>
					</view>
					<view class="wd100 wlkflex col9 read-like justify-between">
						<view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
						<view v-if="item.params.like=='normal'" class="wlkflex">
							<u-icon name="heart" color="#999999" size="15"></u-icon>
							<view class="ml05">{{note.like}}</view>
						</view>
					</view>
				</view>
				<view class="detail-img relative">
					<image class="wd100 hg100" lazy-load :src="note.image" mode="aspectFill" />
					<view class="detail-auth bgw" v-if="item.params.auth=='normal'">
						<span class="mr05 bz">#</span>{{note.auth}}
					</view>
				</view>
			</view>
			<u-loadmore line :status='status' lineColor='#ccc'></u-loadmore>
		</view>
		<customized-tabbar></customized-tabbar>
	</view>
</template>

<script>
	import {
		toUrl
	} from '@/wlkutils/tools';
	export default {
		data() {
			return {
				active: 0,
				list: [],
				menu: [],
				Iindex: -1,
				page: 1,
				status: 'loadmore'
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.Iindex = e.detail.value
			},
			setName(e) {
				console.log(e)
				this.Iindex = e
			},
			jump(url) {
				toUrl(url)
			},
			setAct(e) {
				// console.log(1);
				this.active = e
			},
			async getMenu() {
				const res = await uni.$u.http.post("category/getCategory");
				let list = []
				res.data.list.map(item=>list.push(...item.children))
				this.menu = list
				console.log(res.data.list)
			},
			async getList() {
				if (this.page == 0) return
				this.status = 'loading'
				const res = await uni.$u.http.post("note/getList2", {
					page: this.page
				});
				this.list = this.list.concat(res.data.list)
				this.page = res.data.nextpage
				this.status = res.data.nextpage == 0 ? 'nomore' : 'loadmore'
			}
		},
		onLoad() {
			this.getMenu()
			this.getList()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.icons {
		white-space: nowrap;

		.icon {
			display: inline-block;
			background-color: #f4f4f4;
			border-radius: 5rpx;
		}

		.active {
			color: #006ef4;
			background-color: #ecf4ff;
		}
	}

	.list {
		.note-auth {
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			font-size: $font-sm;
			line-height: 36rpx;
			background-color: white;
			border-radius: 2px;
			padding: 0 10rpx;

			.bz {
				color: #d40;
			}
		}

		.name {
			font-size: $font-lg;
			line-height: 44rpx;
		}

		.more {
			font-size: $font-sm;
			line-height: 44rpx;
		}

		.detail-info {
			height: 240rpx;
			width: 360rpx;

			.info-name {
				font-size: $font-lt;
			}

			.info-desc {
				font-size: $font-sm;
				color: $-color-muted;
				margin-top: 20rpx;
			}

			.read-like {
				font-size: $font-sm;
				width: 260rpx;
			}
		}

		.detail-img {
			width: 240rpx;
			height: 240rpx;

			image {
				border-radius: 2px;
			}

			.detail-auth {
				position: absolute;
				left: 10rpx;
				bottom: 10rpx;
				font-size: $font-sm;
				line-height: 36rpx;
				background-color: white;
				border-radius: 2px;
				padding: 0 10rpx;

				.bz {
					color: #d40;
				}
			}
		}
	}

	.scroll {
		white-space: nowrap;

		.item {
			border-radius: 5rpx;
			display: inline-flex;
		}

		.active {
			color: #006ef4;
			border: 1px solid #c0d9ec;
			background-color: #ecf4ff;
		}
	}

	.title {
		position: relative;
		z-index: 1;

		&::after {
			content: "";
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			z-index: -1;
			height: 8px;
			border-radius: 10rpx;
			background-image: linear-gradient(to right, #67a1fb, #d8e5f6);
			width: 4em
		}
	}

	.body {
		background-color: #e3e8ee;
		min-height: 100vh;
		background-position: center 160rpx;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.card {
		.top {
			height: 100rpx;
			position: relative;

			.content {
				z-index: 1;
				position: relative;
				height: 100%;
			}

			.left {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 60%;
				height: 100%;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-image: url('https://feiya.qfxwl.com/assets/img/left.png');
					background-repeat: no-repeat;
					background-position: left bottom;
					background-size: contain;
					opacity: 0.7;
					z-index: 0;
				}

				.content {
					margin-right: 15%;
				}
			}

			.right {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 60%;
				height: 100%;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-image: url('https://feiya.qfxwl.com/assets/img/right.png');
					background-repeat: no-repeat;
					background-position: right bottom;
					background-size: contain;
					opacity: 0.7;
					/* 设置透明度 */
				}

				.content {
					margin-left: 15%;
				}
			}

			.active {
				height: 110rpx;
				z-index: 1;

				&::after {
					opacity: 1;
				}

				.content {
					position: relative;
					color: #006ef4 !important;

					&::after {
						content: "";
						width: 3em;
						height: 2px;
						bottom: 10rpx;
						left: 50%;
						position: absolute;
						transform: translateX(-50%);
						background-color: #006ff5;
					}
				}
			}
		}

		.tip {
			background-color: #fbede0;
			color: #593321;
		}
	}
</style>